<template>
  <div class="linklist">
      
      <search-add btnName='新增链接' @add-link="addlinks" @searchinput="searchname" class="serarchadd"></search-add>
      <el-form :inline="true" :model="formInline" class="demo-form-inline selectmethod" label-width="100px" >
        <el-form-item label="链接名称:">
          <el-input v-model="formInline.name"></el-input>
        </el-form-item>
      </el-form>
      <div class="btngroup">
        <el-button icon="el-icon-delete" type="info" class="btncolor" @click="deleteAll(multipleSelection)">批量删除</el-button>
        <!-- <el-button  type="info" icon="el-icon-upload2">导出</el-button> -->
        <el-button icon="el-icon-refresh" type="primary">刷新</el-button>
      </div>
      <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      border
      style="width: 100%"
      class="linktable"
      size="mini"
      center
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        label="全选"
        width="55">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="60">
      </el-table-column>
      <el-table-column
        label="链接名称"
        prop="name"
        width="200">

      </el-table-column>
      <el-table-column
        prop="url"
        label="链接地址"
        width="300">
      </el-table-column>
      <el-table-column
        label="最近修改时间"
        >
        <template slot-scope="scope">{{ scope.row.createTime | formatDate  }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="220"
        align="center"
        class-name="operation"
        >
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="editRow(scope.$index, tableData)"
            type="text"
            size="small" class="tabbtn">
            编辑
          </el-button>
          <el-button
           @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small" class="tabbtn">
            删除
          </el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        class="pagelist"
        :total="total">
      </el-pagination>
    <link-dialog :showLink="showLink" :dialogLink="dialogLink" @hidden-link="hiddenLink" @upload-link="uploadLink" ref="linkDialog" ></link-dialog>
  </div>
</template>

<script>
import searchAdd from "@/components/searchAdd";
import linkDialog from '@/components/linkDialog'
import {formatDate} from "@/utils/dateFomart";
import { getLinkTable,addmatreialink, editmatreialink,deletematreialink,getLinkTableserch} from "@/api/matter"
import {formatDate1} from '@/utils/dateFomart'

export default {
  name: "linklist",
  components: {
    searchAdd,
    linkDialog
  },
  data() {
    return {
      formInline: {
        name: "",
      },
      tableData:[],
      multipleSelection: [],
      currentPage: 1,
      pageSize:5,
      total:0,
      form: {
        name: "",
        address: "",
        methods: "全部",
        map: "地图链接"
      },
      formLabelWidth: "120px",
      dialogLink: {
        title: '编辑链接',
        linkName: '链接名称:',
        linkAddress: '链接地址:',
        agreement: '协议方式:',
        linkClassify: '链接分类:',
        btnName: '确认上传',
        placeLinkName: '',
        placeLinkAddress: '',
        valueAgreement: '',
        valueLinkClassify: '',
        placeLinkId:'',
        updateUserId:''
      },
      showLink: false
    };
  },
  filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    },
  mounted() {
    this.getTable(this.pageSize,this.currentPage);
    // updated ();
  },
  methods: {
    searchname(name){
      console.log(name);
      let pagelist={
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        name: name
      }
      getLinkTableserch(pagelist).then(res=>{
        this.total=res.data.elementsSum
        let data=res.data.data
        
        this.tableData=data
      })   
    },


    deleteAll(arr){
      if(arr.length>0){
        this.tableData=this.tableData.filter(function(item){
          console.log(arr.indexOf(item))
          return arr.indexOf(item)==-1
          if(arr.indexOf(item)==-1){
            return item
          }else{
            return false
          }
        })

      }
    },
    toggleSelection(rows) {
      console.log(rows);
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    addlinks(e) {
      this.showLink = true
      this.dialogLink = {
        title: '新增链接',
        linkName: '链接名称:',
        linkAddress: '链接地址:',
        agreement: '协议方式:',
        linkClassify: '链接分类:',
        btnName: '确认上传',
        placeLinkName: '',
        placeLinkAddress: '',
        placeLinkId:'',
        valueAgreement: '',
        valueLinkClassify: ''
      }
      console.log(e);
    },
    hiddenLink () {
      this.showLink = false
    },
    uploadLink (result) {
      let self = this
      if (self.dialogLink.title === '新增链接') {
         addmatreialink(result).then(res=>{
           console.log(res);
           if(res.status==200){
             this.$message({
              message: '添加成功！',
              type: 'success'
            })
            this.showLink=false;
             this.getTable(this.pageSize,this.currentPage);
           }
         });
      } else if (self.dialogLink.title === '编辑链接') {
        editmatreialink(result).then(res=>{
         // if(res.data.code==0){
             if(res.status==200){
             this.$message({
              message: '编辑成功！',
              type: 'success'
            })
            this.showLink=false;
            this.getTable(this.pageSize,this.currentPage);
            }
        })
      }
    },
    deleteRow(index, tableData) {
      let id=this.tableData[index].id;
      deletematreialink(id).then(res=>{
        console.log(res)
        if(res.status==200){
          this.$message({
              message: '删除成功！',
              type: 'success'
            })
          this.getTable(this.pageSize,this.currentPage);
        }
      });
       this.tableData.splice(index, 1);
    },
    editRow(index, tableData) {
      let data = tableData[index];
      console.log(data)
      this.showLink = true
      this.dialogLink = {
        title: '编辑链接',
        linkName: '链接名称:',
        linkAddress: '链接地址:',
        agreement: '协议方式:',
        linkClassify: '链接分类:',
        btnName: '确认上传',
        placeLinkName: data.name,
        placeLinkAddress: data.url,
        placeLinkId:data.id,
        updateUserId:'1',
        valueAgreement: data.valueAgreement,
        valueLinkClassify: data.valueLinkClassify
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize=val;
      this.getTable(this.pageSize,this.currentPage);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage=val;
       this.getTable(this.pageSize,this.currentPage);
      console.log(`当前页: ${val}`);
    },
    getTable(pageSize,pagecur){
      let pagelist={
        pageNum: pagecur,
        pageSize: pageSize
      }
      getLinkTable(pagelist).then(res=>{
        console.log(res.data);
       
        this.tableData=res.data.data;
        this.total=res.data.elementsSum;
      }).catch(error=>{
        console.log(error)
      })
    }
  },

  updated () {
    //更新子菜单的四个选项的数据
    this.$refs.linkDialog.linkName = this.dialogLink.placeLinkName
    this.$refs.linkDialog.linkAddress = this.dialogLink.placeLinkAddress
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.linklist {
  background-color: #ccc;
  padding: 8px;
  height: 100%;
  .serarchadd {
    padding: 10px;
  }

  .btngroup {
    display: inline-block;
    float: right;
    margin: 18px;
    margin-top: 30px;
    button{
      background: #2DE1E1;
      border-color: #2DE1E1;
    }
  }
  .selectmethod {
    padding: 8px;
    display: inline-block;
    .el-form-item {
      margin: 18px;
    }

  }
  .pagelist {
      height: 30px;
      line-height: 30px;
      margin:16px 8px;
      .btn-next {
        background-image: url("../../assets/img/next1.png");

      }
      .btn-prev {
        margin-left: 25%!important;
        background-image: url("../../assets/img/pre1.png");
      }
    }
}
</style>
